<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门追踪</title>
    <script src="js/common.js"></script>
    <style>
        body{
            margin: 0 8px 0 8px;
        }
        .tab-container {
            width: 100%;
            padding: 12px 0 10px 0;
            position: sticky;
            top: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            background-color: white;
            z-index: 9999;
        }
        .main-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }
        .main-tab {
            padding: 5px 15px;
            margin: 0 3px;
            cursor: pointer;
            border-radius: 4px;
            color: #555;
            background: rgba(233,48,48,.1);
        }
        .main-tab.active {
            background: #e93030;
            color: white;
            font-weight: bold;
        }
        .sub-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .sub-tab {
            padding: 4px 10px;
            margin: 3px;
            cursor: pointer;
            color: #999;
            border-radius: 4px;
            background: #f6f6f6;
        }
        .sub-tab.active {
            background: rgba(233, 48, 48, .1);
            color: #e93030;
        }
        .content-area {
            padding: 3px;
            text-align: center;
        }
        
        .concept-list {
            width: 100%;
            /*max-width: 800px;*/
            margin: 0 auto;
        }
        .concept-item {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            border-bottom: 1px solid #eee;
            justify-content: space-between;
            flex-direction: column;
        }
        .concept-item-inner {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
        }
        .etf-info {
            display: flex;
            width: 100%;
            padding: 8px 0;
            margin-top: 5px;
        }
        .left-group {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
        }
        .right-group {
            display: flex;
            align-items: center;
        }
        .rank-index {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.32);
            font-weight: bold;
        }
        .rank-index.first {
            background-color: #ff4d4f;
            color: white;
        }
        .rank-index.second {
            background-color: #d46b08;
            color: white;
        }
        .rank-index.third {
            background-color: #faad14;
            color: white;
        }
        .concept-name {
            flex: 1;
            text-align: left;
            margin-right: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hot-tag {
            padding: 2px 8px;
            border: 1px solid #ff4d4f;
            color: #ff4d4f;
            background: white;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 5px;
        }
        .concept-tag {
            border: 1px solid #d9d9d9;
            color: #666;
            background: white;
            font-size: 12px;
            padding: 2px 8px;
            margin-right: 5px;
            border-radius: 4px;
        }
        .tag-tag {
            padding: 2px 8px;
            border: 1px solid #ff4d4f;
            color: #ff4d4f;
            background: white;
            border-radius: 4px;
            font-size: 12px;
            /*margin-right: 5px;*/
        }
        .change-rate {
            width: 70px;
            text-align: right;
            font-weight: bold;
        }
        .change-rate.positive {
            color: #ff2436;
        }
        .change-rate.negative {
            color: #07AB4B;
        }
        .hot-score {
            width: 80px;
            text-align: right;
            font-size: 12px;
            color: #999;
        }
        
        /* 修改ETF信息样式 */
        .etf-info {

        }
        .etf-name {
            flex: 1;
            text-align: left;
            background-color: #f0f0f0;
            color: #666;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 13px;
        }
        .etf-change-rate {
            /*width: 70px;*/
            text-align: left;
            font-weight: bold;
            padding: 2px 0px;
            font-size: 13px;
            background-color: #f0f0f0;
        }
        .etf-change-rate.positive {
            color: #ff2436;
        }
        .etf-change-rate.negative {
            color: #07AB4B;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="main-tabs" id="mainTabContainer">
            <!-- 主分类将由JS动态渲染 -->
        </div>
        
        <div class="sub-tabs" id="subTabContainer">
            <!-- 子分类将由JS动态渲染 -->
        </div>
    </div>
    
    <div class="content-area" id="contentArea">
        <!-- 内容区域将根据选择动态渲染 -->
        概念板块内容展示区 (开发中样式)
    </div>

    <script>
        // 分类数据
        const categoryData = [
            {
                name: "板块",
                type: "1",
                list: [
                    {name: "行业板块", type: "2"},
                    {name: "概念板块", type: "1"}
                ]
            },
            {
                name: "热门",
                type: "2",
                list: [
                    {name: "热门文章", type: "4"},
                    {name: "百度热搜", type: "bdHotList"},
                    {name: "热门话题", type: "3"}
                ]
            },
            {
                name: "热股",
                type: "3",
                list: [
                    {name: "大家都在看", type: "normal"},
                    {name: "快速飙升中", type: "skyrocket"},
                    {name: "技术交易派", type: "tech"},
                    {name: "价值投资派", type: "value"}
                ]
            },
            {
                name: "ETF",
                type: "ETF",
                list: []
            }
        ];

        document.addEventListener('DOMContentLoaded', function() {
            const mainTabContainer = document.getElementById('mainTabContainer');
            const subTabContainer = document.getElementById('subTabContainer');
            const contentArea = document.getElementById('contentArea');
            
            // 渲染主分类
            categoryData.forEach((category, index) => {
                const mainTab = document.createElement('div');
                mainTab.className = `main-tab ${index === 0 ? 'active' : ''}`;
                mainTab.textContent = category.name;
                mainTab.dataset.main = category.name;
                mainTabContainer.appendChild(mainTab);
            });

            // 渲染子分类
            function renderSubTabs(mainCategory) {
                subTabContainer.innerHTML = '';
                const category = categoryData.find(c => c.name === mainCategory);
                if(category && category.list.length > 0) {
                    category.list.forEach((sub, subIndex) => {
                        const subTab = document.createElement('div');
                        subTab.className = `sub-tab ${subIndex === 0 ? 'active' : ''}`;
                        subTab.textContent = sub.name;
                        subTab.dataset.main = mainCategory;
                        subTab.dataset.sub = sub.name;
                        subTab.dataset.type = sub.type;
                        subTabContainer.appendChild(subTab);
                    });
                    // 默认选中第一个子分类并更新内容
                    updateContent(mainCategory, category.list[0].name);
                }
            }

            // 初始化渲染第一个分类的子分类
            renderSubTabs(categoryData[0].name);
            
            // 使用事件委托处理分类切换
            document.querySelector('.tab-container').addEventListener('click', function(e) {
                const mainTab = e.target.closest('.main-tab');
                const subTab = e.target.closest('.sub-tab');
                
                if(mainTab) {
                    // 主分类切换
                    document.querySelectorAll('.main-tab').forEach(t => t.classList.remove('active'));
                    mainTab.classList.add('active');
                    renderSubTabs(mainTab.dataset.main);
                    // 新增：如果没有子分类，直接调用updateContent
                    const category = categoryData.find(c => c.name === mainTab.dataset.main);
                    if(category && category.list.length === 0) {
                        updateContent(mainTab.dataset.main, null);
                    }
                }
                
                if(subTab) {
                    // 子分类切换
                    document.querySelectorAll('.sub-tab').forEach(t => t.classList.remove('active'));
                    subTab.classList.add('active');
                    updateContent(subTab.dataset.main, subTab.dataset.sub);
                }
            });
            
            // 更新内容区域
            function updateContent(mainType, subType) {
                contentArea.innerHTML = '';
                
                // 获取当前激活的子分类
                const activeSubTab = document.querySelector('.sub-tab.active');
                let type;
                
                if(activeSubTab) {
                    type = activeSubTab.dataset.type;
                } else {
                    const activeMainTab = document.querySelector('.main-tab.active');
                    if(activeMainTab) {
                        const mainCategory = categoryData.find(c => c.name === activeMainTab.dataset.main);
                        if(mainCategory) {
                            type = mainCategory.type;
                        }
                    }
                }
                
                if(type) {
                    fetch(`http://localhost:8110/common/stockComment/thsTop?type=${type}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log('接口返回数据:', data);
                            if(data.status_code === 0 && mainType === '板块' && (subType === '概念板块' || subType === '行业板块')) {
                                renderConceptList(data.data.plate_list);
                            } else if(data.status_code === 0 && mainType === '热门' && subType === '热门话题') {
                                renderHotTopicList(data.data.topic_list);
                            } else if(data.status_code === 0 && mainType === '热门' && subType === '热门文章') {
                                renderHotArticleList(data.data);
                            } else if(data.status_code === 0 && mainType === '热股' ) {
                                renderPopularStockList(data.data.stock_list);
                            } else if(data.status_code === 0 && mainType === 'ETF' ) {
                                renderPopularStockList(data.data.list);
                            } else if(data.code === 200 && subType === '百度热搜' ) {
                                renderBaiduHotList(data.hotList);
                            } else {
                                contentArea.innerHTML = `${mainType} - ${subType ? subType : mainType}内容展示区 (开发中样式)`;
                            }
                        })
                        .catch(error => {
                            console.error('请求失败:', error);
                        });
                }
            }

            function renderConceptList(data) {
                const listContainer = document.createElement('div');
                listContainer.className = 'concept-list';

                data.forEach((item, index) => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'concept-item';

                    // 概念行容器
                    const conceptItemInner = document.createElement('div');
                    conceptItemInner.className = 'concept-item-inner';

                    // 左部分容器
                    const leftGroup = document.createElement('div');
                    leftGroup.className = 'left-group';

                    // 排名序号
                    const rankIndex = document.createElement('div');
                    rankIndex.className = 'rank-index' + (index < 3 ? ` ${['first', 'second', 'third'][index]}` : '');
                    rankIndex.textContent = item.order || index + 1;
                    leftGroup.appendChild(rankIndex);

                    // 概念名称
                    const conceptName = document.createElement('div');
                    conceptName.className = 'concept-name';
                    conceptName.textContent = item.name || '-';
                    leftGroup.appendChild(conceptName);

                    // 热榜标签
                    if(item.hot_tag) {
                        const hotTag = document.createElement('div');
                        hotTag.className = 'hot-tag';
                        hotTag.textContent = item.hot_tag;
                        leftGroup.appendChild(hotTag);
                    }

                    // 涨停标签
                    if(item.tag) {
                        const tagTag = document.createElement('div');
                        tagTag.className = 'tag-tag';
                        tagTag.textContent = item.tag;
                        leftGroup.appendChild(tagTag);
                    }

                    conceptItemInner.appendChild(leftGroup);

                    // 右部分容器
                    const rightGroup = document.createElement('div');
                    rightGroup.className = 'right-group';

                    // 涨跌幅
                    const changeRate = document.createElement('div');
                    changeRate.className = 'change-rate' +
                        (item.rise_and_fall > 0 ? ' positive' : item.rise_and_fall < 0 ? ' negative' : '');
                    changeRate.textContent = formatNumber(item.rise_and_fall,2,1)+'%';
                    rightGroup.appendChild(changeRate);

                    // 热度值
                    const hotScore = document.createElement('div');
                    hotScore.className = 'hot-score';
                    hotScore.textContent = formatNumberToChineseUnit( item.rate ) + '热度';
                    rightGroup.appendChild(hotScore);

                    conceptItemInner.appendChild(rightGroup);
                    itemElement.appendChild(conceptItemInner);

                    // 修改ETF信息行
                    if(item.etf_name || item.etf_rise_and_fall) {
                        const etfInfo = document.createElement('div');
                        etfInfo.className = 'etf-info';

                        const leftGroup = document.createElement('div');
                        leftGroup.className = 'left-group';

                        const rankIndex = document.createElement('div');
                        rankIndex.style.width = '20px';
                        rankIndex.style.marginRight = '5px';
                        leftGroup.appendChild(rankIndex);

                        const etfName = document.createElement('div');
                        etfName.className = 'etf-name';
                        etfName.textContent = item.etf_name || '-';
                        leftGroup.appendChild(etfName);

                        const etfChangeRate = document.createElement('div');
                        etfChangeRate.className = 'etf-change-rate' +
                            (item.etf_rise_and_fall > 0 ? ' positive' : item.etf_rise_and_fall < 0 ? ' negative' : '');
                        etfChangeRate.textContent = formatNumber(item.etf_rise_and_fall,2,1 )+ '%';
                        leftGroup.appendChild(etfChangeRate);

                        etfInfo.appendChild(leftGroup);
                        itemElement.appendChild(etfInfo);
                    }

                    listContainer.appendChild(itemElement);
                });

                contentArea.appendChild(listContainer);
            }


            // 新增百度热搜列表渲染函数
            function renderBaiduHotList(data) {
                const listContainer = document.createElement('div');
                listContainer.className = 'concept-list';
                data.forEach((item, index) => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'concept-item';
                    // 概念行容器
                    const conceptItemInner = document.createElement('div');
                    conceptItemInner.className = 'concept-item-inner';
                    // 左部分容器
                    const leftGroup = document.createElement('div');
                    leftGroup.className = 'left-group';
                    // 排名序号
                    const rankIndex = document.createElement('div');
                    rankIndex.className = 'rank-index' + (index < 3 ? ` ${['first', 'second', 'third'][index]}` : '');
                    rankIndex.textContent = index + 1;
                    leftGroup.appendChild(rankIndex);
                    // 标题
                    const conceptName = document.createElement('div');
                    conceptName.className = 'concept-name';
                    conceptName.textContent = item.query || '-';
                    conceptName.style.cursor = 'pointer';
                    conceptName.addEventListener('click', () => {
                        window.open(item.url, '_blank');
                    });
                    leftGroup.appendChild(conceptName);
                    // 热榜标签
                    if(item.isTop === true){
                        const hotTag = document.createElement('div');
                        hotTag.className = 'concept-tag';
                        hotTag.textContent = '☆';
                        hotTag.style.backgroundColor = '#ff455b';
                        hotTag.style.color = '#fff';
                        hotTag.style.border = 'none';
                        leftGroup.appendChild(hotTag);
                    }else if(item.hotTag === '1' || item.hotTag === '3') {
                        const hotTag = document.createElement('div');
                        hotTag.className = 'concept-tag';
                        hotTag.textContent = item.hotTag === '1' ? '新' : '热';
                        hotTag.style.backgroundColor = item.hotTag === '1' ? '#ff455b' : '#ff9812';
                        hotTag.style.color = '#fff';
                        hotTag.style.border = 'none';
                        leftGroup.appendChild(hotTag);
                    }
                    conceptItemInner.appendChild(leftGroup);
                    // 右部分容器
                    const rightGroup = document.createElement('div');
                    rightGroup.className = 'right-group';
                    // 热度值
                    const hotScore = document.createElement('div');
                    hotScore.className = 'hot-score';
                    hotScore.textContent = formatNumberToChineseUnit( item.hotScore ) + '热搜';
                    rightGroup.appendChild(hotScore);
                    conceptItemInner.appendChild(rightGroup);
                    itemElement.appendChild(conceptItemInner);
                    listContainer.appendChild(itemElement);
                });
                contentArea.appendChild(listContainer);
            }

            // 新增热门话题列表渲染函数
            function renderHotTopicList(data) {
                const listContainer = document.createElement('div');
                listContainer.className = 'concept-list';
                
                data.forEach((item, index) => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'concept-item';
                    
                    // 概念行容器
                    const conceptItemInner = document.createElement('div');
                    conceptItemInner.className = 'concept-item-inner';
                    
                    // 左部分容器
                    const leftGroup = document.createElement('div');
                    leftGroup.className = 'left-group';
                    
                    // 排名序号
                    const rankIndex = document.createElement('div');
                    rankIndex.className = 'rank-index' + (index < 3 ? ` ${['first', 'second', 'third'][index]}` : '');
                    rankIndex.textContent = index + 1;
                    leftGroup.appendChild(rankIndex);
                    
                    // 标题
                    const conceptName = document.createElement('div');
                    conceptName.className = 'concept-name';
                    conceptName.textContent = item.title || '-';
                    leftGroup.appendChild(conceptName);
                    
                    // 热榜标签
                    if(item.label_type === 1) {
                        const hotTag = document.createElement('div');
                        hotTag.className = 'concept-tag';
                        hotTag.textContent = '热';
                        leftGroup.appendChild(hotTag);
                    }

                    conceptItemInner.appendChild(leftGroup);
                    
                    // 右部分容器
                    const rightGroup = document.createElement('div');
                    rightGroup.className = 'right-group';
                    
                    // 热度值
                    const hotScore = document.createElement('div');
                    hotScore.className = 'hot-score';
                    hotScore.textContent = formatNumberToChineseUnit( item.hot_value ) + '热度';
                    rightGroup.appendChild(hotScore);
                    
                    conceptItemInner.appendChild(rightGroup);
                    itemElement.appendChild(conceptItemInner);

                    // 新增subtitle显示
                    if(item.subtitle) {
                        const subtitleInfo = document.createElement('div');
                        subtitleInfo.className = 'etf-info';

                        
                        const leftGroup = document.createElement('div');
                        leftGroup.className = 'left-group';
                        
                        const rankIndex = document.createElement('div');
                        rankIndex.style.width = '20px';
                        rankIndex.style.marginRight = '5px';
                        leftGroup.appendChild(rankIndex);
                        
                        const subtitle = document.createElement('div');
                        subtitle.className = 'etf-name';
                        subtitle.textContent = item.subtitle;
                        subtitle.style.background = 'none';
                        leftGroup.appendChild(subtitle);
                        
                        subtitleInfo.appendChild(leftGroup);
                        itemElement.appendChild(subtitleInfo);
                    }

                    // 新增attach_info显示
                    if(item.attach_info && item.attach_info.att_stock && item.attach_info.att_stock.length > 0) {
                        const attachInfo = document.createElement('div');
                        attachInfo.className = 'etf-info';
                        attachInfo.style.display = 'flex';
                        attachInfo.style.flexWrap = 'wrap';
                        attachInfo.style.gap = '10px';

                        const leftGroup = document.createElement('div');
                        leftGroup.className = 'left-group';
                        
                        const rankIndex = document.createElement('div');
                        rankIndex.style.width = '20px';
                        rankIndex.style.marginRight = '5px';
                        leftGroup.appendChild(rankIndex);
                        
                        item.attach_info.att_stock.forEach(attachItem => {
                            const stockContainer = document.createElement('div');
                            stockContainer.style.display = 'flex';
                            stockContainer.style.alignItems = 'center';
                            stockContainer.style.marginRight = '10px';
                            stockContainer.style.background = 'rgba(0, 0, 0, 0.06)'
                            stockContainer.style.fontSize = '12px';
                            stockContainer.style.color = '#858484';
                            
                            const stockName = document.createElement('div');
                            stockName.textContent = attachItem.name || '-';
                            stockName.style.marginRight = '5px';
                            
                            const stockRate = document.createElement('div');
                            stockRate.textContent = formatNumber(attachItem.rise_and_fall,2,1)+'%';
                            stockRate.style.color = formatNumberColor(attachItem.rise_and_fall);
                            stockRate.style.fontWeight = 'bold';
                            
                            stockContainer.appendChild(stockName);
                            stockContainer.appendChild(stockRate);
                            leftGroup.appendChild(stockContainer);
                        });
                        
                        attachInfo.appendChild(leftGroup);
                        itemElement.appendChild(attachInfo);
                    }
                    
                    listContainer.appendChild(itemElement);
                });
                
                contentArea.appendChild(listContainer);
            }

            // 修改后的热门文章列表渲染函数
            function renderHotArticleList(data) {
                const listContainer = document.createElement('div');
                listContainer.className = 'concept-list';
                
                data.forEach((item, index) => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'concept-item';
                    
                    // 概念行容器
                    const conceptItemInner = document.createElement('div');
                    conceptItemInner.className = 'concept-item-inner';
                    conceptItemInner.style.alignItems = 'flex-start';
                    
                    // 左部分容器
                    const leftGroup = document.createElement('div');
                    leftGroup.className = 'left-group';
                    leftGroup.style.alignItems = 'flex-start';
                    
                    // 排名序号
                    const rankIndex = document.createElement('div');
                    rankIndex.className = 'rank-index' + (index < 3 ? ` ${['first', 'second', 'third'][index]}` : '');
                    rankIndex.textContent = item.rank || index + 1;
                    leftGroup.appendChild(rankIndex);
                    
                    // 标题
                    const conceptName = document.createElement('div');
                    conceptName.className = 'concept-name';
                    conceptName.textContent = item.title || '-';
                    conceptName.style.whiteSpace = 'normal';
                    conceptName.style.color = '#323232';
                    conceptName.style.paddingLeft = '5px';
                    if(item.contentUrl) {
                        conceptName.style.cursor = 'pointer';
                        conceptName.addEventListener('click', () => {
                            window.open(item.contentUrl, '_blank');
                        });
                    }
                    leftGroup.appendChild(conceptName);

                    conceptItemInner.appendChild(leftGroup);
                    itemElement.appendChild(conceptItemInner);

                    // 股票信息和热度信息容器
                    const infoContainer = document.createElement('div');
                    infoContainer.className = 'etf-info';
                    infoContainer.style.display = 'flex';
                    infoContainer.style.alignItems = 'center';
                    infoContainer.style.justifyContent = 'space-between';

                    const leftInfoGroup = document.createElement('div');
                    leftInfoGroup.className = 'left-group';
                    leftInfoGroup.style.display = 'flex';
                    leftInfoGroup.style.alignItems = 'center';
                    
                    const emptyIndex = document.createElement('div');
                    emptyIndex.style.width = '20px';
                    emptyIndex.style.marginRight = '5px';
                    leftInfoGroup.appendChild(emptyIndex);
                    
                    // 处理股票信息
                    if(item.stockInfo && item.stockInfo.length > 0) {
                        item.stockInfo
                            .filter(stockItem => stockItem.stockZdf !== undefined && stockItem.stockZdf !== null)
                            .slice(0, 2)
                            .forEach(stockItem => {
                                const stockContainer = document.createElement('div');
                                stockContainer.style.display = 'flex';
                                stockContainer.style.alignItems = 'center';
                                stockContainer.style.marginRight = '10px';
                                stockContainer.style.background = 'rgba(0, 0, 0, 0.06)';
                                stockContainer.style.fontSize = '12px';
                                stockContainer.style.color = '#858484';
                                
                                const stockName = document.createElement('div');
                                stockName.textContent = stockItem.stockName || '-';
                                stockName.style.marginRight = '5px';
                                
                                const stockRate = document.createElement('div');
                                stockRate.textContent = formatNumber(stockItem.stockZdf,2,1)+'%';
                                stockRate.style.color = formatNumberColor(stockItem.stockZdf);
                                stockRate.style.fontWeight = 'bold';
                                
                                stockContainer.appendChild(stockName);
                                stockContainer.appendChild(stockRate);
                                leftInfoGroup.appendChild(stockContainer);
                            });
                    }
                    
                    infoContainer.appendChild(leftInfoGroup);
                    
                    // 热度信息（无论是否有股票数据都显示）
                    if(item.score) {
                        const hotScore = document.createElement('div');
                        hotScore.className = 'hot-score';
                        hotScore.textContent = formatNumberToChineseUnit( item.score ) + '热度';
                        infoContainer.appendChild(hotScore);
                    }
                    
                    itemElement.appendChild(infoContainer);
                    listContainer.appendChild(itemElement);
                });
                
                contentArea.appendChild(listContainer);
            }

            // 新增热股列表渲染函数
            function renderPopularStockList(data) {
                const listContainer = document.createElement('div');
                listContainer.className = 'concept-list';
                
                data.forEach((item, index) => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'concept-item';
                    
                    // 首行容器
                    const firstRow = document.createElement('div');
                    firstRow.className = 'concept-item-inner';
                    
                    // 左部分容器
                    const leftGroup = document.createElement('div');
                    leftGroup.className = 'left-group';
                    
                    // 排名序号容器
                    const rankContainer = document.createElement('div');
                    rankContainer.style.display = 'flex';
                    rankContainer.style.flexDirection = 'column';
                    rankContainer.style.alignItems = 'center';
                    rankContainer.style.marginRight = '5px';
                    
                    // 排名序号
                    const rankIndex = document.createElement('div');
                    rankIndex.className = 'rank-index' + (index < 3 ? ` ${['first', 'second', 'third'][index]}` : '');
                    rankIndex.textContent = item.order || index + 1;
                    rankContainer.appendChild(rankIndex);
                    
                    // 排名变化信息容器
                    const rankChangeContainer = document.createElement('div');
                    rankChangeContainer.style.display = 'flex';
                    rankChangeContainer.style.alignItems = 'center';
                    
                    // 排名变化图标
                    if(item.hot_rank_chg !== 0) {
                        const arrowImg = document.createElement('img');
                        arrowImg.src = item.hot_rank_chg > 0 ? 'img/icon_goUp.svg' : 'img/icon_godown.svg';
                        arrowImg.style.width = '12px';
                        arrowImg.style.height = '12px';
                        arrowImg.style.filter = item.hot_rank_chg > 0 ?
                            'invert(42%) sepia(93%) saturate(1352%) hue-rotate(330deg) brightness(100%) contrast(99%)' : 
                            'invert(44%) sepia(91%) saturate(385%) hue-rotate(88deg) brightness(95%) contrast(91%)';
                        rankChangeContainer.appendChild(arrowImg);
                        
                        // 排名变化数值
                        const changeText = document.createElement('span');
                        changeText.textContent = Math.abs(item.hot_rank_chg);
                        changeText.style.fontSize = '12px';
                        changeText.style.marginLeft = '2px';
                        changeText.style.color = formatNumberColor( item.hot_rank_chg );
                        rankChangeContainer.appendChild(changeText);
                    }
                    
                    // rankContainer.appendChild(rankChangeContainer);
                    leftGroup.appendChild(rankContainer);
                    
                    // 股票名称
                    const stockName = document.createElement('div');
                    stockName.className = 'concept-name';
                    stockName.textContent = item.name + ' ('+ item.code+')';
                    stockName.style.fontSize = '18px';
                    leftGroup.appendChild(stockName);
                    
                    firstRow.appendChild(leftGroup);

                    // 右部分容器
                    const rightGroup = document.createElement('div');
                    rightGroup.className = 'right-group';
                    
                    // 涨跌幅
                    const changeRate = document.createElement('div');
                    changeRate.className = 'change-rate' + 
                        (item.rise_and_fall > 0 ? ' positive' : item.rise_and_fall < 0 ? ' negative' : '');
                    changeRate.textContent = formatNumber(item.rise_and_fall,2,1) + '%';
                    changeRate.style.color = formatNumberColor(item.rise_and_fall);
                    changeRate.style.fontSize = '17px';
                    changeRate.style.marginRight = '20px';

                    rightGroup.appendChild(changeRate);
                    
                    // 热度值
                    const hotScore = document.createElement('div');
                    hotScore.className = 'hot-score';
                    hotScore.textContent = formatNumberToChineseUnit( item.rate ) + '热度';
                    rightGroup.appendChild(hotScore);
                    
                    firstRow.appendChild(rightGroup);
                    itemElement.appendChild(firstRow);

                    // 第二行标签行
                    if(item.tag && (item.tag.concept_tag || item.tag.popularity_tag)) {
                        const secondRow = document.createElement('div');
                        secondRow.className = 'etf-info';
                        
                        const leftGroup = document.createElement('div');
                        leftGroup.className = 'left-group';
                        
                        // 空白占位
                        const emptyIndex = document.createElement('div')
                        emptyIndex.style.marginRight = '5px';
                        if(item.hot_rank_chg === 0) {
                            emptyIndex.style.width = '20px';
                        }
                        leftGroup.appendChild(emptyIndex);

                        // 流行度标签
                        if(item.tag.popularity_tag) {
                            const popularityTag = document.createElement('div');
                            popularityTag.className = 'hot-tag';
                            popularityTag.textContent = item.tag.popularity_tag;
                            leftGroup.appendChild(popularityTag);
                        }
                        
                        // 概念标签
                        if(item.tag.concept_tag && item.tag.concept_tag.length > 0) {
                            item.tag.concept_tag.forEach(tag => {
                                const conceptTag = document.createElement('div');
                                conceptTag.className = 'concept-tag';
                                conceptTag.textContent = tag;
                                leftGroup.appendChild(conceptTag);
                            });
                        }

                        secondRow.appendChild(rankChangeContainer);
                        secondRow.appendChild(leftGroup);
                        itemElement.appendChild(secondRow);
                    }
                    
                    listContainer.appendChild(itemElement);
                });
                
                contentArea.appendChild(listContainer);
            }

        });
    </script>
</body>
</html>